<template>
  <div class="loading">
    <div class="cover">
      <img />
    </div>
    <div class="right">
      <div class="title"></div>
      <div class="author"></div>
      <div class="btm">
        <div class="type"></div>
        <div class="count"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Skeleton'
}
</script>

<style lang="less" scoped>
.title,.author,.type,.count,.cover{
  background-color: var(--main-darken-bg);
  background:linear-gradient(
    100deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 60%,
  ) var(--main-darken-bg);
  background-size: 200% 100%;
  background-position-x: 120%;
  animation:  move 1s linear infinite;
  border-radius: .2em;
}
@keyframes move {
  to{
    background-position-x: -20%;
  }
}
  .loading{
    width: 100%;
    margin: 1em auto;
    display: flex;
    justify-content: space-between;
    .cover{
      overflow: hidden;
      border-radius: .4em;
      width: 20%;
      img{
        width: 100%;
        padding-bottom: 120%;
      }

    }
    .right{
      width: 75%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .title{
        width: 70%;
        height: 1.5em;
      }
      .author{
        width: 50%;
        height: 1em;
      }
      .btm{
        display: flex;
        justify-content: space-between;
        .type{
          width: 30%;
          height: .8em;
        }
        .count{
          width: 20%;
          height: 0.8em;
        }
      }
    }
  }
</style>>
